<template>
    <div  id="water">
        <div class="box" element-loading-background="rgba(0, 0, 0, 1)"  v-loading="loading" ref="box"  >
            <div class="box1" ref="imgitem" v-for="(item,index) in imglist" :key="index"><div></div><el-image lazy     ref="img"  :src="item" > <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div></el-image></div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
export default {
data(){
return {
name:this.$userMsg,
num:this.$num,
img1:"",
uri :this.$avatericon,
imglist:localStorage.getItem('imgs').split(','),
imgheight:localStorage.getItem('imgh').split(','),
imgwidth:localStorage.getItem('imgw').split(','),
colwidth:250,
nums:0,
heightlist:[],
minindex:0,
loading:true

}
},
beforeMount(){

},
mounted(){
     for(var i=0;i<100;i++){
         this.$refs.img[i].offsetHeight=this.imgheight[i]*0.85+"px";
          this.$refs.img[i].offsetWidth=this.imgwidth[i]*0.9+"px";
     }
       setTimeout(()=>{
           this.loading=false
this.getheight()

       },1500)
             
            // this.data.loading=false
   
     
    //console.log(this.$refs.img.height)

},
methods:{


getheight(){
 let dev_width=this.$refs.box.clientWidth;
 this.nums=5;

//console.log(this.nums+"j")Math.floor(dev_width/this.colwidth)
 console.log(this.imgheight)
 for(let i=0;i<100;i++){
      //this.$refs.img[i].offsetHeight= this.imgheight[i]*+"px"
      //Vue.prototype.$imgh[i]*0.75+"px"
     //  this.$refs.imgitem[i].style.width= Vue.prototype.$imgw[i]*0.6+"px"
     console.log(Vue.prototype.$imgh)
    if(i<this.nums){
        
        this.$refs.imgitem[i].style.left= (i*this.colwidth)+"px";
   
   
  //console.log( this.$refs.imgitem[i].style.left)

     this.heightlist.push(this.$refs.imgitem[i].offsetHeight)

    }
else{
    var minheight=Math.min.apply(null,this.heightlist);
    //console.log(this.heightlist)
  
    //this.heightlist.sort(function(a,b){return a-b});
      this.$refs.imgitem[i].style.top=   (minheight)+"px";
      this.minindex=this.getminheight(minheight,this.heightlist);
       this.$refs.imgitem[i].style.left=  this.minindex*this.colwidth+"px"
     this.heightlist[this.minindex]=this.heightlist[this.minindex]+ this.$refs.imgitem[i].offsetHeight;
      // console.log(this.minindex)
   

}


    
 }
 //this.heightlist.sort(function(a,b){return a-b});
 //console.log(this.heightlist)
//  for(let i=this.nums;i<2*this.nums;i++){
//       this.$refs.imgitem[i].style.left=   ((i-this.nums)*this.colwidth)+"px";
//         this.$refs.imgitem[i].style.top=   this.heightlist[0]+"px";

//  }

 // console.log(this.heightlist)



},



getminheight(min,list){
for(var j=0;j<list.length;j++){
    if(min==list[j]){
       
        return j;
    }
}
},


add(event){
let reader = new FileReader();
let img1 = event.target.files[0];
let form = new FormData();
form.append('file', img1, img1.name);
this.$axios.post("/upload", form, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
this.uri = "http://localhost:3002/" + response.data[0].path
console.log(this.uri)
reader.readAsDataURL(img1);
var that = this;
reader.onloadend = function() {
//that.imgs = uri;
// console.log(uri)
}
}).catch(function(err) {
console.log(err);
});

},
addnew(){
var up=document.getElementById('up');
up.click();
// $('#img-upload').click();
},
show(e){
Vue.prototype.$imgpath = e;
console.log( Vue.prototype.$imgpath )
// this.$router.push({path: '/show'})
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

this.$router.push({name:"Show"});
// router.push({name:"Show"})


}else{
// router.push({name:"Showpc"})

this.$router.push({name:"Showpc"})

}
}
}
}
</script>
<style scoped>
#water{
   
     z-index: 0;
}
#water::after{
     content: '';
     height: 200%;
      background-image: url('http://tva2.sinaimg.cn/large/006BkBvFly1gefkkr0nacj310r0m8b29.jpg');
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   /* filter: blur(5px); */
    z-index: -1;
   
}
.box{
    width: 100vw;
  height: 100vh;
position: absolute;

z-index: 9;

}
  .box1{
       margin-top: 80px;
overflow: auto;
     position: absolute;
    
 
    
    
  }
  #water>>>.el-image{
      box-shadow: 4px 4px 5px #44444444;
      transform: scale(.9);
      max-width: 200px;
      min-height: 130px;
      width: 90%;
     
     border-radius: 10px;
     margin: 5px;
  }
  .box1:hover{
      
     transform: rotateY(180deg) ;
  
  
      transition: 1.4s;
  }
li{
   
 float: right bottom;
 font-size: 30px;
    z-index: 0;
    color: pink;
    position: absolute;
    left: 80%;
    top:70%
    
    
}
</style>